<div class="left-navbar">
	<div class="module">
		<div class="navbar-header">
			<span class="navbar-brand">Colegios</span>
		</div>
		<div>
			<ul class="nav nav-pills nav-stacked">
				<li ng-repeat="colegio in colegios"
					ng-class="$parent.nav.styleLeftNavbarItem(colegio)"><a href=""
					ng-bind="colegio.nombre"
					ng-click="$parent.nav.showColegio(colegio)"></a></li>
			</ul>

			<button ep-open-modal="nuevo-colegio">Nuevo Colegio</button>
		</div>
	</div>
</div>
<div class="main-content" ng-show="currentColegio">
	<div class="module" ng-controller="ColegioCtrl">
		<div class="top-navbar navbar navbar-default">
			<ul class="nav navbar-nav">
				<li ng-class="{active:nav.tab=='colegio'}"><a href=""
					ng-click="nav.tab='colegio'">Colegio</a></li>
				<li ng-class="{active:nav.tab=='usuarios'}"><a href=""
					ng-click="nav.tab='usuarios'">Usuarios</a></li>
				<li ng-class="{active:nav.tab=='config'}"><a href=""
					ng-click="nav.tab='config'">Configuración</a></li>
			</ul>

		</div>
		<div ng-switch="nav.tab">
			<div ng-switch-when="usuarios">
				<div class="top-navbar navbar navbar-default">
					<ul class="nav navbar-nav">
						<li ng-class="{active:nav.actor=='coordinadores'}"><a href=""
							ng-click="nav.actor='coordinadores'">Coordinadores</a></li>
						<li ng-class="{active:nav.actor=='secretarios'}"><a href=""
							ng-click="nav.actor='secretarios'">Secretarios</a></li>
						<li ng-class="{active:nav.actor=='orientadores'}"><a href=""
							ng-click="nav.actor='orientadores'">Orientadores</a></li>
						<li ng-class="{active:nav.actor=='profesores'}"><a href=""
							ng-click="nav.actor='profesores'">Profesores</a></li>

					</ul>

				</div>
				<div ng-show="nav.actor">
					<button ep-open-modal="nuevo-usuario">
						Nuevo <i class="glyphicon glyphicon-plus pull right"></i>
					</button>
					<table class="table table-striped">
						<thead>
							<tr>
								<th>Nombre</th>
								<th>Email</th>
							</tr>
						</thead>
						<tbody>
							<tr ng-repeat="persona in colegio[nav.actor]">
								<td ng-bind="persona.nombreCompleto"></td>
								<td ng-bind="persona.email"></td>
							</tr>
						</tbody>

					</table>
				</div>
			</div>
			<div ng-switch-when="colegio">
				<form>
					<div class="form-group">
						<label for="nombreColegio">Nombre colegio</label> <input
							type="text" class="form-control" id="nombreColegio"
							placeholder="Nombre colegio" ng-model="colegio.nombre">
					</div>


					<div class="form-group">
						<label for="nombreColegio">Jornada</label> <select
							class="form-control" id="nombreColegio" placeholder="Jornada"
							ng-model="colegio.idJornada"
							ng-options="jornada.id as jornada.nombre for jornada in constantes.jornadas">
						</select>
					</div>

					<div class="form-group">
						<label for="nombreColegio">Dirección</label> <input type="text"
							class="form-control" id="nombreColegio" placeholder="Dirección"
							ng-model="colegio.direccion">
					</div>
					<div class="form-group">
						<label for="nombreColegio">Telefono</label> <input type="text"
							class="form-control" id="nombreColegio" placeholder="Telefono"
							ng-model="colegio.telefono">
					</div>
				</form>
			</div>
			<div ng-switch-when="config">
				<div class="top-navbar navbar navbar-default">
					<ul class="nav navbar-nav">
						<li ng-class="{active:nav.subconfig=='grados'}"><a href=""
							ng-click="nav.subconfig='grados'">Grados</a></li>
						<li ng-class="{active:nav.subconfig=='materias'}"><a href=""
							ng-click="nav.subconfig='materias'">Materias</a></li>


					</ul>

				</div>
				<div ng-switch="nav.subconfig">
					<div ng-switch-when="grados">
						<ep-pick-list></ep-pick-list>
					</div>
					<div ng-switch-when="materias">
						<ep-pick-list></ep-pick-list>
					</div>
				</div>
			</div>

		</div>
		<ep-modal-pane title="Nuevo Usuario" aceptar="crearUsuario()"
			modal-id="nuevo-usuario"> <ep-formulario-persona
			persona="nuevoUsuario"></ep-formulario-persona> </ep-modal-pane>
	</div>
</div>


<ep-modal-pane title="Nuevo Colegio" aceptar="crearColegio()"
	modal-id="nuevo-colegio">
<div class="form-group">
	<label for="nombreColegio">Nombre colegio</label> <input type="text"
		class="form-control" id="nombreColegio" placeholder="Nombre colegio"
		ng-model="nuevoColegio.nombre">
</div>


<div class="form-group">
	<label for="nombreColegio">Jornada</label> <select class="form-control"
		id="nombreColegio" placeholder="Jornada"
		ng-model="nuevoColegio.idJornada"
		ng-options="jornada.id as jornada.nombre for jornada in constantes.jornadas">
	</select>
</div>

<div class="form-group">
	<label for="nombreColegio">Dirección</label> <input type="text"
		class="form-control" id="nombreColegio" placeholder="Dirección"
		ng-model="nuevoColegio.direccion">
</div>
<div class="form-group">
	<label for="nombreColegio">Telefono</label> <input type="text"
		class="form-control" id="nombreColegio" placeholder="Telefono"
		ng-model="nuevoColegio.telefono">
</div>

</ep-modal-pane>